<template>
    <div>
        <el-card shadow="hover">
            <el-button-group v-if="!disabledValue" class="juque_button_group">
                <el-button size="default" type="success" @click="onAdd">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增映射
                </el-button>
            </el-button-group>
            <el-table :data="datasource" :border="true" class="juque_table">
                <el-table-column prop="sourceField" label="源字段" min-width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.sourceField" show-word-limit maxlength="50"
                            placeholder="源字段" />
                        <span v-else>{{ scope.row.sourceField }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="idFlag" label="是否主键" min-width="150" show-overflow-tooltip>
                    <template #default="scope">
                        <el-radio-group v-if="scope.row.edit" v-model="scope.row.idFlag" class="ml-4">
                            <el-radio :label="1" size="small">是</el-radio>
                            <el-radio :label="0" size="small">否</el-radio>
                        </el-radio-group>
                        <span v-else>{{ yesOrNoCompute(scope.row.idFlag) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="targetField" label="目标字段" min-width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.targetField" show-word-limit maxlength="50"
                            placeholder="请输目标字段" />
                        <span v-else>{{ scope.row.targetField }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="expression" label="表达式" min-width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.expression" show-word-limit maxlength="100"
                            placeholder="请输入表达式" />
                        <span v-else>{{ scope.row.expression }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.remark" :rows="2" type="textarea" show-word-limit
                            maxlength="100" placeholder="请输入备注" />
                        <span v-else>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="!disabledValue" label="操作" fixed="right" width="200">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onSave(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            保存
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-popover placement="top">
                            <p class="juque_popover_p">确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="small" text>取消</el-button>
                                <el-button size="small" type="primary" @click="onDelete(scope.row)">确认</el-button>
                            </div>
                            <template #reference>
                                <el-button size="small" text type="primary">
                                    <el-icon>
                                        <ele-DeleteFilled />
                                    </el-icon>
                                    删除
                                </el-button>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30, 50]" v-model:current-page="pageInfo.page" background
                v-model:page-size="pageInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, onMounted, computed, } from 'vue';
import { TaskFieldMappingInfoListModel } from '/@/interfaces/DataPipelineModel';
import { PageInfo } from '/@/interfaces/BaseModel';
import { DictInfo } from '/@/enums/dict-info-enum';

interface MappingModel extends TaskFieldMappingInfoListModel {
    index: number | 0,
    edit: boolean | false,
}

interface State {
    disabledValue: boolean | false,
    dataList: MappingModel[],
    datasource: MappingModel[],
    pageInfo: PageInfo,
}
export default defineComponent({
    name: 'TaskFieldMappingInfoList',
    components: {},
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Array<TaskFieldMappingInfoListModel>,
            default: [],
        }
    },
    emits: [],
    setup(props, context) {
        const { data, disabled } = props;
        const state = reactive<State>({
            disabledValue: disabled,
            dataList: [],
            datasource: [],
            pageInfo: {
                page: 1,
                limit: 10,
                total: 0
            }
        });
        const yesOrNoCompute = computed(() => {
            return function (value: number) {
                const dictInfo = DictInfo.yesOrNo.filter(item => item.key === value);
                return dictInfo ? dictInfo[0].label : value;
            }
        });
        const methodMap = reactive({
            onLoad: function () {
                let result: MappingModel[] = [];
                data.forEach((item: TaskFieldMappingInfoListModel) => result.push({ ...item, edit: false, index: 0 }));
                methodMap.sort(result);
                state.dataList = [...result];
                state.pageInfo.total = data.length;
            },
            onSearch: function () {
                const start: number = (state.pageInfo.page - 1) * state.pageInfo.limit;
                const end: number = start + state.pageInfo.limit;
                let result: MappingModel[] = [];
                state.dataList.forEach((item: MappingModel, i) => {
                    if (i >= start && i <= end) {
                        result.push(item);
                    }
                });
                state.datasource = [...result];
            },
            onAdd: function () {
                const editting = state.datasource.filter(item => item.edit === true);
                if (editting.length > 0) {
                    return;
                }
                const row: MappingModel = {
                    id: undefined,
                    taskId: undefined,
                    sourceField: undefined,
                    idFlag: 0,
                    targetField: undefined,
                    expression: undefined,
                    remark: undefined,
                    edit: true,
                    index: -1,
                }
                let result: MappingModel[] = [row, ...state.datasource];
                state.datasource = [...result];
            },
            onEdit: function (row: MappingModel) {
                row.edit = true;
            },
            onDelete: function (row: MappingModel) {
                const result: MappingModel[] = state.dataList.filter(item => item.index !== row.index);
                methodMap.sort(result);
                state.dataList = [...result];
                methodMap.onSearch();
            },
            onSave: function (row: MappingModel) {
                row.edit = false;
                let result: MappingModel[];
                if (row.index < 0) {
                    result = [row, ...state.dataList];
                } else {
                    result = [...state.dataList];
                }
                state.dataList = [...result];
                state.pageInfo.page = 1;
                methodMap.sort(state.dataList);
                methodMap.onSearch();
            },
            sort: function (rows: MappingModel[]) {
                rows.forEach((item, i) => item.index = i);
            },
            handleLoadData: function () {
                return state.dataList;
            },
            onHandleSizeChange: function (val: number) {
                state.pageInfo.limit = val;
                methodMap.onSearch();
            },
            onHandleCurrentChange: function (val: number) {
                state.pageInfo.page = val;
                methodMap.onSearch();
            },
        });
        // 挂载完成后
        onMounted(() => {
            methodMap.onLoad();
            methodMap.onSearch();
        });
        return {
            DictInfo,
            yesOrNoCompute,
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/task-info/task-info.scss';
</style>
